<template>
  <div class="el-full el-box-column">
    <el-tabs class="el-tabs-bg el-flex el-tabs-flex" value="taskPane" @tab-click="loadPane">
      <el-tab-pane class="el-flex el-box-column" label="我的待办" name="taskPane">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="">
            <el-radio-group>
              <el-radio label="1" border>全部</el-radio>
              <el-radio label="2" border>正常</el-radio>
              <el-radio label="2" border>逾期</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchDialog">
              高级查询
              <i class="el-icon-magic-stick"></i>
            </el-button>
          </el-form-item>
          <el-form-item style="float:right">
            <el-button type="primary" plain @click="startApprove">
              发起审批
              <i class="el-icon-position"></i>
            </el-button>
          </el-form-item>
        </el-form>
        <div class="el-flex el-box-column">
          <el-table ref="roleTable" height="100%" style="width: 100%" border stripe :data="taskList">
            <el-table-column min-width="100px" sortable show-overflow-tooltip prop="taskTitle" label="标题"></el-table-column>
            <el-table-column min-width="100px" sortable show-overflow-tooltip prop="startDate" label="开始时间" align="center"></el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="taskTotal" :page-size="taskPageSize"
          :current-page="taskCurrentPage" @size-change="taskSizeChange" @current-change="taskCurrentChange"></el-pagination>
      </el-tab-pane>

      <el-tab-pane class="el-flex el-box-column" label="我的已办" name="achTaskPane" lazy>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="分类">
            <el-select placeholder="请选择分类">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker type="date" placeholder="选择日期" v-model="workbenchSearchForm.date1" style="width: 160px;"></el-date-picker>
            - <el-date-picker type="date" placeholder="选择日期" v-model="workbenchSearchForm.date1" style="width: 160px;"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">
              查询
              <i class="el-icon-search"></i>
            </el-button>
          </el-form-item>
        </el-form>
        <div class="el-flex el-box-column">
          <el-table ref="roleTable" height="100%" style="width: 100%" border stripe :data="achTaskList">
            <el-table-column min-width="100px" sortable show-overflow-tooltip prop="taskTitle" label="标题"></el-table-column>
            <el-table-column min-width="100px" sortable show-overflow-tooltip prop="startDate" label="开始时间" align="center"></el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="achTaskTotal" :page-size="achTaskPageSize"
          :current-page="achTaskCurrentPage" @size-change="achTaskSizeChange" @current-change="achTaskCurrentChange"></el-pagination>
      </el-tab-pane>
    </el-tabs>
    <el-drawer title="高级查询" :visible.sync="searchDialogVisible" direction="rtl" custom-class="demo-drawer">
      <div class="el-box-column" style="height: 100%;">
        <el-form :model="workbenchSearchForm" ref="roleForm" label-width="100px" class="el-flex el-over-auto" style="padding-right: 10px;">
          <el-form-item label="状态" prop="roleName">
            <el-col :span="24">
              <el-radio-group v-model="asd">
                <el-radio label="" border>全部</el-radio>
                <el-radio label="1" border>正常</el-radio>
                <el-radio label="2" border>逾期</el-radio>
              </el-radio-group>
            </el-col>
          </el-form-item>
          <el-form-item label="活动时间">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="workbenchSearchForm.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center;">-</el-col>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="workbenchSearchForm.date1" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="所有分类">
            <el-col :span="24">
              <el-select v-model="workbenchSearchForm.domainId" placeholder="请选择域信息">
                <el-option v-for="item in domainOPtions" :key="item.domainId" :label="item.domainName" :value="item.domainId">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-form>
        <div style="text-align: right;margin-bottom: 10px;padding-right:10px;">
          <el-button type="primary" @click="getRoleList">
            确定
            <i class="el-icon-document-checked el-icon--right"></i>
          </el-button>
          <el-button @click="searchDialogVisible = false">
            取消
            <i class="el-icon-refresh-left"></i>
          </el-button>

        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import {
    Dialog,
    MessageBox,
    Message,
    Drawer,
    Tabs,
    TabPane,
    Table,
    TableColumn,
    Pagination
  } from 'element-ui';
  export default {
    components: {
      //注册插件
      'el-dialog': Dialog, //弹窗
      'el-drawer': Drawer, //抽屉
      'el-tabs': Tabs, //选项卡
      'el-tab-pane': TabPane, //选项卡
      'el-table': Table, //表格
      'el-table-column': TableColumn, //表格列
      'el-pagination': Pagination //分页
    },
    data() {
      return {
        workbenchSearchForm: {

        }, //查询参数
        taskTotal: 0,
        taskPageSize: 20, //每页展示条数
        taskCurrentPage: 1, //默认显示页数
        taskList: [],
        achTaskTotal: 0,
        achTaskPageSize: 20, //每页展示条数
        achTaskCurrentPage: 1, //默认显示页数
        achTaskList: [],
        searchDialogVisible: false
      }
    },
    methods: {
      /* 开启高级查询弹窗 */
      searchDialog() {
        this.searchDialogVisible = true;
      },
      // 改变当前页条数
      taskSizeChange(val) {
        this.pageSize = val
        this.getTaskList() //刷新待办列表
      },
      // 切换页数
      taskCurrentChange(val) {
        this.currentPage = val
        this.getTaskList() //刷新待办列表
      },
      // 改变当前页条数
      achTaskSizeChange(val) {
        this.pageSize = val
        this.getTaskList() //刷新待办列表
      },
      // 切换页数
      achTaskCurrentChange(val) {
        this.currentPage = val
        this.getTaskList() //刷新待办列表
      },
      /* 获取待办*/
      getTaskList() {
        this.axios.get('/workFlow/getTaskList').then(res => {
          if (res.data.code != 10000) return;
          this.taskList = res.data.data;
          this.taskTotal = this.taskList.length;
        })
      },
      /* 获取已办*/
      getAchTaskList() {
        this.axios.get('/workFlow/getAchTaskList').then(res => {
          if (res.data.code != 10000) return;
          this.achTaskList = res.data.data;
          this.achTaskTotal = this.achTaskList.length;
        })
      },
      /* 切换选项卡时,刷新表格*/
      loadPane(obj) {
        if (obj.name == "taskPane") {
          this.getTaskList();
        } else if (obj.name == "achTaskPane") {
          this.getAchTaskList();
        }
      },
      /* 发起审批跳转*/
      startApprove(roleId) {
        this.$router.addRoutes([{
          path: '/',
          component: this.pageLayout,
          meta: {
            title: '流程中心'
          },
          children: [{
            path: 'startApprove',
            name: 'startApprove',
            component: () => import('@/views/workflow/startApprove/startApprove'),
            meta: {
              title: '发起审批'
            }
          }]
        }]);
        this.$router.push({
          name: 'startApprove',
          params: {
            roleId: roleId
          }
        })
      }
    },
    created() {
      this.getTaskList(); //初始化获取待办列表
    }
  }
</script>
